<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div id="">
				<button type="button" @click="handle">销毁事件</button>
			</div>
			<test-tom></test-tom>
			<test-jack></test-jack>
		</div>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			<!-- 兄弟组件间传值 -->
			// 第一步
			var hub = new Vue()
			
			Vue.component('test-tom', {
				data: function() {
					return {
						num: 0
					}
				},
				template: `
				<div>
				  <div>TOM:{{num}}</div>
				  <div>
					  <button @click="handle">点击</button>
					</div>
				</div>
				`,
				methods: {
					//第二步
					handle() {
						hub.$emit('jack-event', 1)
					}
				},
				mounted() {
					//第三步
					hub.$on('tom-event', (val) => {
						this.num += val
					})
				}
			})
			
			Vue.component('test-jack', {
				data: function() {
					return {
						num: 0
					}
				},
				template: `
				<div>
				  <div>JACK:{{num}}</div>
				  <div>
					  <button @click="handle">点击</button>
					</div>
				</div>
				`,
				methods: {
					handle() {
						hub.$emit('tom-event', 1)
					}
				},
				mounted() {
					hub.$on('jack-event', (val) => {
						this.num += val
					})
				}
			})
			
			var vm = new Vue({
				el: "#app",
				data: {},
				methods: {
					handle() {
						hub.$off('tom-event')
						hub.$off('jack-event')
					}
				}
			})
		</script>
	</body>
</html>

